// // import React,{Component} from 'react'
// // import {NavLink,Route} from 'react-router-dom'
// // import {Content,ContentList} from '../Components'
// // import axios from 'axios'

// // export default class BasicRouting extends Component{
// //     constructor(props){
// //         super(props);
// //         this.state = {
// //             nav:[]
// //         }
// //     }

// //     componentWillMount(){
// //         axios.post('http://10.31.153.29:3000/cate/list/1')
// //           .then((res)=>{
// //             //   console.log(res.data.docs)
// //             this.setState({
// //                 nav: res.data
// //             }) 
           
// //           })
// //     }
// //     render(){
// //         var nav = this.state.nav;
// //         var navs = [];
// //                 for(let i =0;i<nav.length;i++){
// //                     navs.push(
// //                         <NavLink key={i} className="list-group-item" 
// //                         activeClassName="active" 
// //                         to={`${this.props.match.url}/${nav[i]._id}`}>{nav[i].title}
// //                         </NavLink>
// //                     )
                   
// //                 }
// //         return (
// //             <div className="container">
// //                 <h1>
// //             新闻
// //                 </h1>
// //                 <div className="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar">
// //                     <div className="list-group">
// //                     {navs}
// //                      {/* <NavLink 
// //                 className="list-group-item" 
// //                 activeClassName="active" 
// //                 to={`${this.props.match.url}`}>
// //                 {navs}</NavLink> */}
// //                     </div>
// //                 </div>
// //                 <div className="row row-offcanvas row-offcanvas left">
// //                     <Route path={`${this.props.match.url}/:id`} component={ContentList}/>
// //                 </div>
// //             </div>
// //         )
// //     }
// // }
import React from "react";
import { connect } from "react-redux";
import {NavLink,Route} from 'react-router-dom'
import { fetchList, addToCart} from "../actions/news";
import 'element-theme-default';
import {Button,input} from 'element-react'
import { Content,ContentList} from "../Components";
import axios from 'axios';

class BasicRouting extends React.Component {
  constructor(props){
    super(props);
    this.state = {
        nav:[]
    }
  }
  componentWillMount() {
    this.props.fetchList();
    axios.post('http://10.31.153.29:3000/cate/list/1', {
         
    })
    .then((res) =>{
      this.setState({
          nav:res.data
      })

    })
    .catch(function (error) {
    });

    this.getData({});

  }

  changePage(e) {
    var page = e.currentTarget.getAttribute("data-page");
    var params = { page: parseInt(page), limit: 4 };
    this.props.fetchList(params);
  }



  getData(obj){
       
    
    this.props.fetchList(obj)
}

  findbytitle(){
    var title=$('.findtitle').val();
    this.getData({title:title});
}

  render() {
   

    //链接跳入
    var nav=this.state.nav;
    var navs=[];
    navs.push(
      <NavLink  className="list-group-item"  activeClassName="active" to="/" >全部商品
      </NavLink>
    )
    for(var i=0;i<nav.length;i++){
        navs.push(
          <NavLink key={i} className="list-group-item" 
            to={`${this.props.match.url}/${nav[i]._id}`}>
            {nav[i].title}
          </NavLink>
        )
    }

    

    const { lists, fetchList, addToCart, carts } = this.props;
    var ls = [];
    if (!lists) {
      return <li>数据加载中。。。。。</li>
    }
    // console.log(lists);
    // for (let i = 0; i < lists.docs.length; i++) {
    //   ls.push(
    //     <li className="span4" key={i}>
    //       <a href="#" className="thumbnail">
    //         <h2>{lists.docs[i].title}</h2>
    //         <h3>{lists.docs[i].content}</h3>
    //         <p>
    //             <NavLink to={`productdetail/${lists.docs[i]._id}`} activeClassName="active">进入详情页</NavLink>
    //         </p>
    //       </a>
    //     </li>
    //   );
    // }

    //分页
    var pages = 1;
    var outputPages = [];
    pages = lists.pages;
    for (let i = 1; i <= pages; i++) {
      outputPages.push(
        <li key={i}>
          <a
            href="javascript:void(0)"
            data-page={i}
            onClick={e => this.changePage(e)}
          >
            {i}
            <span className="sr-only" />
          </a>
        </li>
      );
    }

    return (
      <div>
         <div className="container">
          <div className="navbar navbar-static-top" >
              {navs}
            </div>

            <div  className="container">
            <div className="row row-offcanvas row-offcanvas left">
                     <Route path={`${this.props.match.url}/:id`} component={ContentList}/>
              </div>
            <div className="col-lg-6">
                        <div className="input-group">
                            <input type="text" className="form-control findtitle" placeholder="Search for..."/>
                            <span className="input-group-btn">
                                <button className="btn btn-default" type="button" onClick={this.findbytitle.bind(this)}>Go!</button>
                            </span>
                        </div>
                    </div>
            </div>
        </div> 
        

        {/* 显示全部内容 */}

        <div className="container marketing"> 
          <div className="row">
            <ul className="thumbnails">{ls}</ul>
          </div>
        </div> 
        <br />
        <nav aria-label="..."><ul className="pagination">{outputPages}</ul></nav>
      </div>
    );
  }
}

const getValue = state => {
  return {
    lists: state.product.lists,
    carts: state.product.carts
  };
};
export default connect(getValue, { fetchList, addToCart})(BasicRouting);

